웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹페이지에 여러 줄의 텍스트를 보여줄 경우 줄바꿈 처리가 필요합니다. 이 경우 잘 알고 있는 word-break, word-wrap css 속성이 사용되죠~ 그런데 만약 알파벳으로 사용되는 경우? css를 사용하여 줄바꿈 처리를 하이픈으로 처리할 수 있습니다.
# css를 사용하여 긴 텍스트 하이픈 처리 방법, hyphens
텍스트가 매우 긴 경우 줄바꿈 처리가 필요합니다. 여러가지 방법이 있지만 하이픈(hyphens)으로 처리하는 방법도 사용할 수 있습니다. 어떻게하면 하이픈 처리가 가능할까요? 그 전에 줄바꿈을 위해서 어떤 방법들이 사용되는지 간략하게 알아봅니다. 먼저 아래를 봐주세요.
비교적 긴 "There is an international airport" 문구를 사용하여 아무것도 적용하지 않았을 때, white-space를 사용했을 때 word-break를 사용했을 때 ~ 그리고 마지막으로 hyphens를 사용했을 때를 각각 비교해보았습니다.
<b>아무것도 적용하지 않음, Normal</b>
<div class="test">
<p>There is an international airport</p>
</div>
<br />
<b>white-space: nowrap;</b>
<div class="test">
<p class="nowrap">There is an international airport</p>
</div>
<br />
<b>word-break: break-all;</b>
<div class="test">
<p class="break-all">There is an international airport</p>
</div>
<br />
<b>hyphens: auto;</b>
<div class="test" lang="en">
<p class="hyphens">There is an international airport</p>
</div>
<style>
.test {
width: 162px;
background: lightgray;
padding: 6px;
}
.test .nowrap {
white-space: nowrap;
}
.test .break-all {
word-break: break-all;
}
.test .hyphens {
hyphens: auto;
}
</style>
<div class="test">
<p>There is an international airport</p>
</div>
<br />
<b>white-space: nowrap;</b>
<div class="test">
<p class="nowrap">There is an international airport</p>
</div>
<br />
<b>word-break: break-all;</b>
<div class="test">
<p class="break-all">There is an international airport</p>
</div>
<br />
<b>hyphens: auto;</b>
<div class="test" lang="en">
<p class="hyphens">There is an international airport</p>
</div>
<style>
.test {
width: 162px;
background: lightgray;
padding: 6px;
}
.test .nowrap {
white-space: nowrap;
}
.test .break-all {
word-break: break-all;
}
.test .hyphens {
hyphens: auto;
}
</style>
위의 예제에서 제일 아래에 있는 경우의 예제가 바로 hyphens 속성을 적용한 예제입니다. 보시는 것처럼 텍스트가 줄바꿈이 될 때 -기호가 자동으로 나타나게 된 것을 알 수 있습니다!
그럼 아래에서 하이픈을 적용하는 방법에 대하여 알아봅니다. 먼저 간단한 문법입니다.
hyphens: auto | manul | none;
각각의 설정값은 다음과 같이 사용됩니다.
manual // (기본값) ‐ 또는 ­ 사용된 경우 적용
auto // 언어값에 따라 자동으로 하이픈이 적용
none // 하이픈을 사용하지 않음
그럼 간단한 예제 코드를 만들어봅니다. 아래의 코드는 위에 적용된 html과 css이며 먼저 html 코드를 살펴봅니다.
<div class="test" lang="en">
<p class="hyphens">international airport</p>
</div>
<p class="hyphens">international airport</p>
</div>
위 예제를 보면 하이픈을 적용하기 위해서 hyphens라는 클래스를 지정하여 사용하였습니다. 그리고 상위의 div 태그를 보면 lang 어트리뷰트를 가지고 있습니다. 하이픈을 적용하기 위해서는 반드시 lang 어트리뷰트가 지정되어 있어야만 합니다. 없는 경우 하이픈이 적용되지 않으니 꼭 함께 사용해야합니다.
"하이픈 적용을 위해서 lang 어트리뷰트를 사용할 것!"
.test {
width: 92px;
background: lightgray;
padding: 6px;
}
.test .hyphens {
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
width: 92px;
background: lightgray;
padding: 6px;
}
.test .hyphens {
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
hyphens를 적용할 경우에는 위와 같이 브라우저 호환성을 위해서 -ms- 그리고 -webkit-을 함께 사용하도록 합니다.
여기까지 css를 사용하여 하이픈을 적용하는 방법을 간략하게 알아보았습니다. 참고로 하이픈을 적용하는 css는 대부분의 브라우저에서 사용하니 참고하세요.
아래의 글도 찾고 계시지 않나요?
